<template>
  <div class="detail">
    <div class="title">
        <div class="p" @click="toMovie">《《</div>
        <div class="h1">电影详情</div>
    </div>
<!-- <button @click="test">ces</button> -->
    <div class="nav">
      <div class="img" v-if="detail.movie"><img :src="detail.movie.img" alt=""></div>

    <div class="right">
      <div class="titles" v-if="detail.movie">{{detail.movie.nm}}</div>
      <div class="eng">{{detail.movie.enm}}</div>
      <div class="type">{{detail.movie.cat}}&nbsp;{{detail.movie.oriLang}}&nbsp;{{detail.movie.ver}}</div>
      <div class="date">{{detail.movie.onlineDate}}&nbsp;{{detail.movie.episodeDur}}分钟</div>
    </div>
    </div>
    
    <div class="score">
      <div class="pp">🐱购票评分</div>
      <div class="sc">😀{{detail.movie.sc}}分&nbsp;&nbsp;♥♥♥♥</div>
      <div class="wish">{{detail.movie.wish}}人想看&nbsp;&nbsp;{{detail.movie.watched}}人看过👀&nbsp;&nbsp;></div>
        
    </div>

    <div class="jianjie">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{detail.movie.shareInfo.content}}</div>

    <div class="buts">
      <button>{{detail.movie.minPriceContent}}&nbsp;特惠购票</button>
    </div>
    

    <div class="dianzi" ></div>
  

    
  </div>
</template>

<script>
// import ReYing from "./ReYing.vue";
export default {
    data() {
      return {
        detail: {},
      };
    },
    props:{
      id:{
        typeof:String,
        default:""
      }
    },
    // components:{
    //   ReYing
    // },
    created() {
    this.getlis();
    // let id = this.$router.query.id;
    // axios
    // .get(`https://apis.netstart.cn/maoyan/movie/detail?movieId=${this.id}`)
    // .then(res => {
    //   console.log(res)
    //   this.detail = res
    // })
  },
    methods:{
      // test(){
      //   console.log(this.detail)
      // },
          getlis() {
      this.axios.get(`/movie/detail?movieId=${this.id}`).then((re) => {
        console.log("re===>", re)
        this.detail = re
        // console.log("re===>" , this.lll.data.feeds)
      })
    },
     toMovie(){
        this.$router.push( {path: '/reying'} )
      },
    }
}
</script>

<style scoped>
    /* .detail{
      background-image: url(../assets/hello.png);
      backdrop-filter: blur(4px);
    } */

    .nav{
      display: flex;
    }
    .nav .img{
      flex: 2.5;
      padding: 10px 5px;
    }
    .right{
      flex: 7.5;
      padding: 10px 5px;
      color: dimgrey;
    }
    .right .titles{
      font-size: 26px;
      font-weight: bold;
      color: black;
    }
    .right .type{
      padding: 15px 0 0;
    }
    .score{
      width: 84%;
      margin: 0 auto;
      margin-top: 15px;
      padding: 5px 5px;
      border: 1px solid dimgray;
      border-radius: 15px;
      color: black;
      line-height: 30px;
    }
    .score .pp{
      margin-left: 5px;
    }
    .score .wish{
      margin-left: 10px;
    }
    .score .sc{
      margin-left: 10px;
      font-size: 25px;
      font-weight: bolder;
      color: darkgoldenrod;
    }
    .jianjie{
      width: 90%;
      margin: 0 auto;
      margin-top: 20px;
      padding: 5px 5px;
      border: 1px solid dimgray;
      color: rgb(53, 49, 49);
      border-radius: 15px;
      line-height: 30px;
    }
    .title{
        width: 100%;
        height: 50px;
        background-color:brown;
    }
    .title .h1{
        display: flex;
        justify-content: center;
        font-size: 25px;
        padding: 10px 0px;
    }
    .title .p{
        float: left;
        padding: 10px 0px;
    }
    .buts{
      
      text-align: center;
      margin: 0 auto;
    }
    button{
      padding: 5px 5px;
      width: 220px;
      height: 40px;
      margin-top: 40px;
       border-radius: 10px;
       background-color: brown;
    }
    
</style>